<template>
  <view>
    <my-message-top :text="'猫咪详情'"></my-message-top>
    <view class="cat-detail">
      
      <view class="cat-message">
        <image :src="catDetail.img" mode=""></image>
        <view class="cat-message-top">
          <text>{{catDetail.name}}</text>
          <image src="../../static/cat-card/cat-detail/woman_female.png" mode="" v-if="catDetail.sex === 0"></image>
          <image src="../../static/cat-card/cat-detail/man_male.png" mode="" v-else></image>
        </view>
        <view class="cat-message-status">
          <view class="cat-message-status-box1">
            <text>{{catDetail.adoption}}</text>
          </view>
          <view class="cat-message-status-box2">
            <text>{{catDetail.sterilization}}</text>
          </view>
        </view>
        <text>性格及特点</text>
        <text>{{catDetail.brief}}</text>
        <text>毛色</text>
        <text>{{catDetail.color}}</text>
        <text>撸猫指南</text>
        <text>{{catDetail.guide}}</text>
      </view>
      
      <view class="cat-photo" @click="gotoCatPhoto()">
        <view class="cat-photo-left">
          <text class="cat-photo-left-p1">{{catDetail.name}}的相册</text>
          <text class="cat-photo-left-p2">共{{catDetail.imgNumber}}张照片</text>
        </view>
        <image src="../../static/cat-card/cat-detail/right1_right-one.png" mode=""></image>
      </view>
      
      <view class="cat-photo-mian">
        <view class="cat-photo-box" v-for="(item,i) in catDetail.imgs">
          <image :src="item" mode=""></image>
        </view>
        
      </view>
    </view>
    
    
    <add-catPic :kid="id"></add-catPic>
  </view>
</template>

<script>
  import {getCatDetail} from '../../api/cat.js'
  export default {
    data() {
      return {
        catDetail: {},
        id: 0
      };
    },
    onLoad(option){
      console.log(option.id);
      this.id = option.id
      this.getCatDetail(option.id)
    },
    methods:{
     async getCatDetail(id){
       const {data:data} = await getCatDetail(id)
       console.log(data);
       this.catDetail = data.data
       console.log(this.catDetail);
     },
     gotoCatPhoto(){
       uni.navigateTo({
         url: '/subpkg/cat-photo/cat-photo?id=' + this.id
       })
     },
     async addCatPic(){
       const res = await uni.chooseImage({
       	count: 1, 
       });
       console.log(res);
       const formData = {
         kid: this.id
       }
       const token = uni.getStorageSync('token')
       const data = await uni.uploadFile({
           url: 'http://www.newbabyya.com/ketty/uploadImg', 
           filePath: res[1].tempFilePaths[0],   
           name: 'file',  
           method: 'post',
           formData: formData,
           header:{
                  'Authorization': token
                 } 
       }); 
       console.log(JSON.parse(data[1].data));
       if(JSON.parse(data[1].data).code === 200) return uni.$showMsg('上传猫咪照片成功！')
     }
    }
  }
</script>

<style lang="scss">
.cat-message{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 25rpx 35rpx;
  image{
    width: 680rpx;
    height: 415rpx;
    margin-bottom: 35rpx;
  }
  .cat-message-top{
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 15rpx;
    text{
      font-size: 25px;
      font-weight: bold;
      color: #666666;
    }
    image{
      width: 52rpx;
      height: 52rpx;
      margin-left: 25rpx;
    }
  }
  .cat-message-status{
    display: flex;
    align-items: center;
    justify-content: start;
    margin-bottom: 35rpx;
    .cat-message-status-box1{
      width: 162rpx;
      height: 52rpx;
      background-color: #FFF4CE;
      border-radius: 26rpx;
      text-align: center;
      text{
        font-size: 13px;
        color: #666666;
        line-height: 52rpx;
      }
    }
    .cat-message-status-box2{
      width: 162rpx;
      height: 52rpx;
      background-color: #FFEFEF;
      border-radius: 26rpx;
      text-align: center;
      margin-left: 20rpx;
      text{
        font-size: 13px;
        line-height: 52rpx;
        color: #666666;
      }
    }
  }
  text{
    font-size: 15px;
    font-weight: bold;
    color: #868686;
    margin-bottom: 35rpx;
  }
}

.cat-photo{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 170rpx;
  width: 100%;
  background-color: #FEF4D1;
  .cat-photo-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-left: 40rpx;
    .cat-photo-left-p1{
      font-size: 20px;
      font-weight: bold;
      color: #666666;
      margin-bottom: 20rpx;
    }
    .cat-photo-left-p2{
      font-size: 15px;
      color: #868686;
    }
  }
  image{
    width: 56rpx;
    height: 56rpx;
    padding-right: 40rpx;
  }
}

.cat-photo-mian{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 50rpx 25rpx;
  .cat-photo-box{
    image{
      width: 348rpx;
      height: 236rpx;
    }
  }
}

.add-pic{
  position: fixed;
  right: 25rpx;
  bottom: 50rpx;
  image{
    width: 136rpx;
    height: 136rpx;
    
  }
}
</style>
